CSS常用属性

3.5  CSS常用属性

1、字体属性

通过设置文本的字体、字号、风格、行间距可以增强网页内容的可读性、突出重点内容。

（1）设置字号（font-size）

下图分别使用px、%、em做为单位设置字号，用%、em为单位时以父元素的字号作参考，例如父元素字号为16px，则62.5%当于10px、1em相当于16px。

例如：

注：所有浏览器默认字号为16px。

（2）设置粗体（font-weight）

通过font-weight属性来设置文本的粗细。下面详细介绍其取值情况。

font-weight取值为normal，定义标准字符，不加粗，normal是默认值。

font-weight取值为bold，设置文本为粗体。还可以取值bolder，设置更粗的字体；取值lighter，设置更细的字体；取值inherit，规定继承父元素字体的粗细。

font-weight取值700，以数值设置文字为粗体，可取100~900之间的值，以100为增量。400相当于normal，700等价于bold。

举例如下：

（3）设置风格（font-style）

font-style取值normal（默认值），显示一个标准的字体样式。

font-style取值italic，会显示一个斜体的字体样式。

font-style取值oblique，也会显示一个倾斜的字体样式，它与italic的效果区别不明显。

font-style取值inherit，规定从父元素继承字体样式。

例如：

（4）设置字体（font-family）

可以同时给元素指定多个字体，不同字体之间使用逗号分隔，如果字体名称为汉字或由多个单词组成，则必须使用引号包裹该字体名称。

使用font-family属性设置的字体，浏览器会读取用户设备上系统安装的字体。当指定了多个字体后，浏览器会按照从前往后的序查找并设置字体，如下图所示，如果用户电脑未安装“微软雅黑”字体，则会查找并使用arial字体，依次类推，直到找到可用字体。如果所设置的字体无一可用，则使用浏览器默认字体。

字体设置举例如下：

（5）设置行间距（line-height）

将line-height（行间距或行高）与font-size的差值分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框，line-height属性的设置会影响行框的布局。

例如：

2、文本

文本是网页的核心内容之一，通常涉及到文本对齐、修饰等问题，突出布局的美观性。

（1）文本对齐

设置文本对齐使用text-align属性，可以设置文本左对齐、右对齐、居中对齐、两端对齐等。例如：

（2）文本修饰

修饰文本使用text-decoration属性进行设置，该属性允许对文本设置某种修饰效果，如加下划线、删除线等。若后代元素没有自己的修饰，则继承祖先元素的设置。

例如：

3、定位

通过定位坐标来设置元素相对于某一元素的位置。CSS中有4种定位方式，分别是静态定位、相对定位、绝对定位和固定定位。CSS使用position属性设置定位方式。而元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

（1）静态定位（static），所有元素默认的定位方式，处于正常文档流中。注意，在静态定位方式下，设置元素位置坐标无意义。

例如：

（2）相对定位（relative），相对于元素自已在网页中原来的位置进行定位，不会脱离文档流。

例如：

（3）绝对定位（absolute），生成绝对定位的元素，相对于静态定位以外的第一个父元素进行定位，会脱离文档流（指设置绝对定位后其原来空间不再属于当前元素）。

例如：

（4）固定定位（fixed），也生成绝对定位的元素，相对于浏览器窗口进行定位，也会脱离文档流。

例如：

4、链接（伪类）

在使用超链接时，会发现这些链接上的文本与普通文本在表现方式上有许多不同，如链接上的文字会出现下划线，颜色与鼠标形状也会改变等。

超链接（）是Web系统中一个很常用的重要标签，它有4种状态：未访问、已访问、悬停时以及点击时，可根据链接处于不同的状态设置不同的样式。

通过如下方式获取链接所处的状态：

        a:link 未被访问

        a:visited 已被访问

        a:hover 悬停时

        a:active 点击时

如果同时定义4种状态的样式，其书写顺序需要按：

   link--visited--hover--active

（即LoVeHAte原则）进行设置，否则可能会失效。

例如：

5、列表

设置列表属性主要用于控制列表显示的样式，可以通过list-style的几个子属性从列表项标记的类型、位置、图片等几个方面进行设置。

（1）设置列表标志类型，使用list-style-type属性进行设置，该属性可取值none(无标记)、disc(默认，实心圆)、circle(空心圆)、square(空心方块)等。

例如：

（2）设置标志类型为图片，使用list-style-image属性进行设置，用用户指定图像来做列表项的标记。

例如：

（3）设置标志位置，使用list-style-position属性进行设置，该属性可取值inside、outside(默认)，区别在于标记与列表项文本内容左边的间距不一样。

例如：

（4）list-style是一个复合列表属性，涵盖了所有其他列表样式属性。可以将上述3个子属性按顺序用一个list-style复合属性来书写。

如下例所示：

6、背景

可以使用不同颜色、图片等作为元素的背景，在使用图片作背景时，还涉及到平铺、位置、滚动等方面的设置。

（1）设置背景色使用background-color属性，该属性的取值可以是表示颜色的关键字、16进制颜色值或者RGB颜色值。

例如：

（2）设置背景图片使用background-image属性，该属性的取值可以通过url(图片文件位置)的方式给出。

例如：

（3）设置背景图片位置使用background-position属性，该属性的值由两个参数组成，第1个参数表示水平，第2个参数表示垂直。

例如：

（4）设置背景平铺使用background-repeat属性，该属性的可能取值有no-repeat、repeat-x、repeat-y等。

例如：

（5）背景图是否随内容滚动使用background-attachment属性进行设置，该属性的可能取值有scroll、fixed等。

例如：

7、透明度

元素透明度在元素层叠时体现得特别明显，即表示从上层元素可以隐约看到背景的清晰程度。设置元素透明度使用opacity（不透明度）属性，该属性取值范围为0~1之间的值，0表示完全透明，值越大越不透明。透明度的设置可以使元素产生一定程度的立体感。

例如：

8、溢出

元素的嵌套产生了父子关系，外层的元素称为父盒子，内层的元素称为子盒子，当子盒子大小或纯文本内容大于父盒子时便会产生溢出。

通过overflow属性可以对溢出进行处理，该属性取值hidden时，元素内容被修剪，溢出部分不可见；该属性取值scroll时，元素内容被修剪，浏览器显示滚动条供用户来浏览溢出部分；该属性取值auto时，如果元素内容被修剪，浏览器显示滚动条以便查看其余内容。

例如：

9、层级

当多个元素设置了互相重叠的定位坐标时可能会发生相互覆盖的情况，通过设置z-index可以调整其层级顺序。以浏览器所在平面为参考平面（即z-index=0），z轴垂直向外指向浏览者方向的值为正值，反之为负值。通过设置层级也可以生成一定程度的立体效果。

例如：

10、浮动

通过浮动可以使元素脱离文档流，改变元素默认的排布方式，进而可以灵活的控制网页的布局。通过float属性设置元素的浮动。

（1）float取值为left时，设置元素左浮动，即元素向左靠。

例如：

（2）float取值为right时，设置元素右浮动，即元素向右靠。

例如：

    float:right;

11、清除浮动

清除浮动就是消除因浮动带来的影响。使用clear属性定义元素的哪边不允许出现浮动元素。当元素的clear属性取值left时，则在该元素左侧不允许浮动元素；当元素的clear属性取值right时，则在该元素右侧不允许浮动元素；当元素的clear属性取值both时，则在该元素左右两侧都不允许浮动元素；当元素的clear属性取值none时（默认值），则在该元素两侧允许浮动元素。

例如：